<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>按钮</button>
  <script>
    const btn = document.querySelector('button')

    // 赋值点击事件
    btn.onclick = ()=>{
     alert('点击了111')
    }

    btn.onclick =  ()=>{
      alert('点击了333')
    }

    // 追加点击事件
    btn.addEventListener('click',function(){
      alert('点击了222')
    })

    btn.addEventListener('click',function(){
      alert('点击了444')
    })

    // function 函数：通过 this 获取当前绑定事件的元素
    btn.addEventListener('click',function(){
      alert('点击了 function 函数',this)
    })

    // 箭头函数：通过 e.currentTarget 获取当前绑定事件的元素
    btn.addEventListener('click',(e)=>{
      alert('点击了箭头函数',e.currentTarget)
    })
  </script>
</body>
</html>